<template>
  <b-container style="margin-top: 10px" fluid="sm">
    <b-row>
      <b-col cols="12" md="4" sm="12" order="2" order-md="1">
        <sides />
      </b-col>
      <b-col cols="12" md="8" sm="12" order="1" order-md="2" >
        <b-breadcrumb :items="items" />
        <b-card title="新闻详情">
          <b-card-body>
            <h2 style="text-align: center">{{ details.title }}</h2>
            <div style="text-align: center">
              {{ details.lastUpdateDate }}
            </div>
            <div v-html="details.details" class="details"/>
          </b-card-body>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>

import { getEditData } from '@/api/news/index'
import sides from '@/components/sides'

export default {
  name: 'Index',
  components: {
    sides
  },
  data() {
    return {
      details: {},
      id: this.$route.query.id,
      items: [
        {
          text: '首页',
          href: '/'
        }
      ]
    }
  },
  watch: {
    '$route.query.id'(v) {
      this.id = v
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getEditData(this.id).then(r => {
        const { data } = r
        this.details = data
        this.items.push({
          text: this.details.informationType.name,
          href: '/newsType?id=' + this.details.informationType.id
        }, {
          text: this.details.title
        }
        )
      })
    }
  }
}
</script>

<style scoped>
.details >>> * {
  max-width: 100%;
}
</style>
